<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人中心</title>
    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/animate.css" type="text/css">
    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/font-awesome.css?v=4.4.0" type="text/css">
    <link rel="stylesheet" href="${path}/css/personCenter/person-center.css">
    <link href="${path}/css/index/index.css" rel="stylesheet">
    <!-- 订单 begin -->
    <link rel="stylesheet" href="${path}/css/personCenter/swiper-3.2.7.min.css">
    <style>
        body {
            background-image: url(http://pzgv309jp.bkt.clouddn.com/faa30367-4e66-4b5a-8043-4b1f1df69cda.jpg);

            background-size: 650px 350px;
            background-repeat: repeat-x;
            background-position: 40% 50px;

        }
        th {
            padding: 5px 20px;

        }

        td {
            padding: 2px 20px;

        }
    </style>

</head>


<body>
<%@include file="../common/nav_top.jsp"%>

<!-- 图片 begin -->
<div id="you">
    <span>悠 U旅行交友新方式</span><br>
    欢迎您!
</div>
<!-- 图片end -->
<!-- 面包屑 begin -->
<div class="container-fluid" style="margin-top: 150px;padding: 0px">
    <div class="row" style="margin: 0px 8%;font-size: 14px;">
        <ul class="breadcrumb" style="background-color: white">
            <li><a href="#">首页</a></li>
            <li><a href="#">我的悠U</a></li>
            <li class="active">我的订单</li>
        </ul>
    </div>
</div>
<!-- 面包屑 end -->

<!-- 个人中心 -->
<div class="container-fluid" style="margin-bottom: 20px;">
    <div class="row">
        <div class="col-md-1">
        </div>
        <!-- 左侧导航 begin -->
        <div class="col-md-2" style="padding: 0px">
            <!--  -->
            <div style="width: 75%;font-size: 14px;float: left;">
                <div id="leftnavs">
                    <a style="text-decoration: none;" class="list-group-item" name="change">
                        <h3>我的悠U</h3>
                    </a>
                    <a class="list-group-item" name="change">
                        <span class="glyphicon glyphicon-tasks"> 我的订单</span>

                    </a> </li>
                    <a href="${path}/guidehome/home" class="list-group-item">
                        <span class="glyphicon glyphicon-flag"></span>&nbsp;我的导游

                    </a></li>
                    <a class="list-group-item" name="change">
                        <span class="  glyphicon glyphicon-credit-card"></span> &nbsp;我的钱包
                    </a></li>
                    <a href="${path}/travelerInfoDis/travelerInfo?id=${userTable.id}" class="list-group-item">
                        <span class="glyphicon glyphicon-play-circle"></span>&nbsp;我的游记</a>
                    <a name="change" class="list-group-item">
                        <span class="glyphicon glyphicon-bell"></span>&nbsp;系统通知</a></li>

                    <a class="list-group-item" name="change" >
                        <span class="glyphicon glyphicon-magnet"></span>&nbsp;个人资料</a>
                    <a name="change" class="list-group-item">
                        <span class="glyphicon glyphicon-user"></span>&nbsp;上传头像</a>
                </div>
            </div>
        </div>
        <!-- end -->





        <!--异步分页的区域-->
        <div id="content">

        </div>




    </div>
</div>
<!-- 主题 end -->
<%--为了让外部的js文件使用灵活使用path路径--%>
<input type="hidden" value="${path}" id="path">
<%@include file="../common/nav_bottom.jsp"%>

<!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
<script src="${path}/plugins/jquery/jquery.min.js"></script>
<!--引入bootstrap的js文件-->
<script src="${path}/plugins/bootstrap/js/bootstrap.min.js"></script>

<script src="${path}/js/person_center/swiper-3.4.0.jquery.min.js"></script>

<%--引用前端验证--%>
<script src="${path}/H+/js/plugins/validate/jquery.validate.min.js"></script>
<script src="${path}/H+/js/plugins/validate/messages_zh.min.js"> </script>
<script src="${path}/H+/js/plugins/validate/additional-methods.min.js"> </script>
<%--查找订单的js--%>
<script src="${path}/js/person_center/person_center_order.js"></script>


<script>

    $(function(){
        //如果js和jsp在同一个文件中,那么可以在js中使用EL表达式
        //如果js是单独的外部文件,则不允许使用EL表达式
        $("#content").load("${path}/person-center");
    });
    var clicks = document.getElementsByName("change");
    var show = document.getElementsByName("show");


    clicks[0].onclick = function () {
        show[0].style.display = 'block';
        show[1].style.display = 'none';
        show[2].style.display = 'none';
        show[3].style.display = 'none';
        show[4].style.display = 'none';
        show[5].style.display = 'none';
    }
    clicks[1].onclick = function () {
        show[1].style.display = 'block';
        show[0].style.display = 'none';
        show[2].style.display = 'none';
        show[3].style.display = 'none';
        show[4].style.display = 'none';
        show[5].style.display = 'none';
    }
    clicks[2].onclick = function () {
        show[2].style.display = 'block';
        show[0].style.display = 'none';
        show[1].style.display = 'none';
        show[3].style.display = 'none';
        show[4].style.display = 'none';
        show[5].style.display = 'none';
    }
    clicks[3].onclick = function () {
        show[2].style.display = 'none';
        show[0].style.display = 'none';
        show[1].style.display = 'none';
        show[4].style.display = 'none';
        show[3].style.display = 'block';
        show[5].style.display = 'none';
    }
    clicks[4].onclick = function () {
        show[2].style.display = 'none';
        show[0].style.display = 'none';
        show[1].style.display = 'none';
        show[4].style.display = 'block';
        show[3].style.display = 'none';
        show[5].style.display = 'none';
    }
    clicks[5].onclick = function () {

        window.location='${path}/head'
    }





</script>

</body>


</html>